@tailwind base;
@tailwind components;
@tailwind utilities;

/* Theme tokens */
@layer base {
  :root {
    /* App-level */
    --app-bg: #f8fafc; /* slate-50 */
    --app-fg: #0f172a; /* slate-900 */

    /* Panels & surfaces */
    --panel-bg: #ffffff;
    --panel-fg: #0f172a;
    --panel-border: #e5e7eb; /* slate-200 */
    --subtle-bg: rgba(255,255,255,0.9);

    /* Muted */
    --muted-fg: #64748b; /* slate-500 */
    --muted-strong: #475569; /* slate-600 */

    /* Accents */
    --accent: #3b82f6; /* blue-500 */
    --accent-contrast: #ffffff;

    /* States */
    --info-bg: #dbeafe; /* blue-100 */
    --info-fg: #1d4ed8; /* blue-700 */
    --success-bg: #dcfce7; /* green-100 */
    --success-fg: #166534; /* green-800 */
    --warn-bg: #fef3c7; /* amber-100 */
    --warn-fg: #b45309; /* amber-700 */
    --danger-bg: #fee2e2; /* red-100 */
    --danger-fg: #b91c1c; /* red-700 */

    /* Terminal */
    --terminal-foreground: #0f172a; /* slate-900 */
    --terminal-cursor: #0f172a;
    
    /* Interface configuration */
    --base-font-size: 14px;
    --ui-density: 1.0;
    --border-radius: 4px;
    --animations-enabled: 1;
  }

  .dark {
    --app-bg: #222426; /* 用户自定义深色主题色 */
    --app-fg: #d4d4d4; /* neutral-300 */

    --panel-bg: #222426; /* 用户自定义深色主题色 */
    --panel-fg: #d4d4d4;
    --panel-border: #2a2c2e; /* 比主题色稍亮的边框色 */
    --subtle-bg: rgba(34,36,38,0.6);

    --muted-fg: #a3a3a3; /* neutral-400 */
    --muted-strong: #737373; /* neutral-500 */

    --accent: #60a5fa; /* blue-400 */
    --accent-contrast: #0a0a0a;

    --info-bg: rgba(37,99,235,0.2);
    --info-fg: #93c5fd;
    --success-bg: rgba(34,197,94,0.2);
    --success-fg: #86efac;
    --warn-bg: rgba(245,158,11,0.18);
    --warn-fg: #fcd34d;
    --danger-bg: rgba(239,68,68,0.18);
    --danger-fg: #fca5a5;

    --terminal-foreground: #d4d4d4;
    --terminal-cursor: #d4d4d4;
    
    /* Interface configuration - inherited from light theme, can be overridden */
    --base-font-size: 14px;
    --ui-density: 1.0;
    --border-radius: 4px;
    --animations-enabled: 1;
  }
}

/* Global scrollbar styling (theme-aware) */
.thin-scrollbar { scrollbar-width: thin; }
html:not(.dark) .thin-scrollbar { scrollbar-color: rgba(100,116,139,.6) transparent; }
html.dark .thin-scrollbar { scrollbar-color: rgba(148,163,184,.5) transparent; }
.thin-scrollbar::-webkit-scrollbar { height: 8px; width: 8px; }
html:not(.dark) .thin-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(100,116,139,.55); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
html:not(.dark) .thin-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(100,116,139,.75); }
html.dark .thin-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(148,163,184,.45); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
html.dark .thin-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(148,163,184,.65); }
.thin-scrollbar::-webkit-scrollbar-corner { background: transparent; }

/* Compact variant for dense panels */
.scrollbar-compact.thin-scrollbar::-webkit-scrollbar { height: 6px; width: 6px; }
html:not(.dark) .scrollbar-compact.thin-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(100,116,139,.45); }
html.dark .scrollbar-compact.thin-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(148,163,184,.35); }

/* Always-visible track variant */
.scrollbar-track.thin-scrollbar::-webkit-scrollbar-track { background: transparent; }
html:not(.dark) .scrollbar-track.thin-scrollbar::-webkit-scrollbar-track:hover { background: rgba(148,163,184,.08); }
html.dark .scrollbar-track.thin-scrollbar::-webkit-scrollbar-track:hover { background: rgba(148,163,184,.08); }

/* Monaco search match highlight styles */
.search-match-highlight {
  background-color: rgba(251, 191, 36, 0.28); /* amber-400 @ 28% */
}
html.dark .search-match-highlight {
  background-color: rgba(245, 158, 11, 0.28); /* amber-500 @ 28% */
}
.search-match-inline {
  background-color: rgba(251, 191, 36, 0.28);
  border-radius: 2px;
}
html.dark .search-match-inline {
  background-color: rgba(245, 158, 11, 0.28);
  border-radius: 2px;
}

/* Theme-aware utility classes */
.theme-font-size {
  font-size: var(--base-font-size);
}

.theme-border-radius {
  border-radius: var(--border-radius);
}

.theme-density {
  transform: scale(var(--ui-density));
}

.theme-transitions {
  transition-duration: calc(var(--animations-enabled) * 200ms);
}

/* Apply theme density to specific components */
.ui-button {
  padding: calc(0.5rem * var(--ui-density)) calc(1rem * var(--ui-density));
  border-radius: var(--border-radius);
  transition-duration: calc(var(--animations-enabled) * 150ms);
}

.ui-input {
  padding: calc(0.375rem * var(--ui-density)) calc(0.75rem * var(--ui-density));
  border-radius: var(--border-radius);
}

.ui-panel {
  border-radius: var(--border-radius);
}

/* Component-specific theme application */
.settings-panel,
.chat-view,
.editor-tabs,
.sidebar-panel {
  font-size: var(--base-font-size);
}

.settings-panel .ui-button,
.settings-panel button {
  padding: calc(0.25rem * var(--ui-density)) calc(0.75rem * var(--ui-density));
  border-radius: var(--border-radius);
  transition: all calc(var(--animations-enabled) * 150ms) ease;
}

.settings-panel input,
.settings-panel select {
  padding: calc(0.375rem * var(--ui-density)) calc(0.5rem * var(--ui-density));
  border-radius: var(--border-radius);
}

